<!--
 * @Author: your name
 * @Date: 2021-03-19 19:45:28
 * @LastEditTime: 2021-03-26 19:28:15
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue空包c:\Users\Administrator\Desktop\practice\demo\src\views\register.vue
-->
<template>
  <div>
      <!-- 注册页面 -->
      <div id="register">
        <div id="register_top">
          <p @click="backk">《</p>
          <h2 id="register_title">注册</h2>
        </div>
        <!-- 手机号和获取验证码按钮 -->
        <p>
          <i class="iconfont icon-shouji1"></i>
          <input type='text' v-model="num" id="register_num" placeholder="手机号"/>
          <button id="register_free" @click="free">{{codeText}}</button>
        </p>
        <p>
          <a href="">{{data}}</a>
          <input type='text' v-model="vcode" id="register_ver" placeholder="验证码"/>
        </p>
        <p>
          <input type='text' v-model="pass" id="register_pwd" placeholder="密码"/>
        </p>
        <p>
          <input type='text' v-model="surepass" id="register_surepwd" placeholder="确认密码"/>
        </p>
        <p id="register_que">常见问题？</p>
        <button id="register_but" @click="reg">注册</button>
      </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data(){
    return {
      data:'',
      num:'',
      pass:'',
      surepass:'',
      vcode:'',
      codeText:'获取验证啊'
    }
  },
  methods:{
    free(){
      const phone = this.num
      axios({
                url:'http://1807a.gtxiaoyu.cn/shop/shop/register/verify',
                method:'post',
                data:{
                    phone,
                }
            }).then((res)=>{
                if(res.data.status===400){
                    alert(res.data.msg)
                }else{
                    this.codeText=res.data.msg
                }
            })
    },
    //设置获取验证码按钮倒计时
    timer(){
      let num = 60;
      let that = this;
      //拼接
      that.codeText = num + '秒后再次获取'
      //设置时间计时器
      let time = setInterval(function(){
        //时间到后变为重发验证码，清除定时器
        if(num == 0){
          clearInterval(time);
          time = null;
          that.codeText = '重发验证码'
        }else{
          num--;
          that.codeText = num + '秒后重新获取'
        }
      },1000)
    },
    backk(){
      //返回登录页面
      this.$router.push('/login')
    },
    reg(){
      const phone = this.num
      const captcha=this.vcode
      const password = this.pass
      axios({
                url:'http://1807a.gtxiaoyu.cn/shop/shop/register',
                method:'post',
                data:{
                    phone,
                    captcha,
                    password,
                }
            }).then((res)=>{
                if(res.data.status===400){
                    alert(res.data.msg)
                }else{
                    this.$router.push('/login')
                }
            })
    },  
  }
}
</script>

<style>
  #register{
    width: 400px;
    height: 500px;
    /* border: 1px solid grey; */
    margin: 10px auto;
  }
  #register_top{
    width: 400px;
    height: 40px;
    /* border: 1px solid grey; */
    display: flex;
  }
  #register_title{
    margin-left: 160px;
    margin-top: 30px;
  }
  #register_num,#register_ver,#register_pwd,#register_surepwd{
    width: 270px;
    height: 35px;
    margin-left: 50px;
    margin-top: 10px;
    border:none;
    outline: none;
    border-bottom: 1px solid grey;
    padding-left: 10px;
  }
  #register_num{
    margin-top: 50px;
    position: relative;
  }
  #register_que{
    font-size: 12px;
    color: grey;
    margin-left: 270px;
    margin-top: 10px;
  }
  #register_but{
    width: 300px;
    height: 40px;
    border-radius: 40px;
    outline: none;
    border:none;
    background: red;
    color:white;
    margin-left: 38px;
    margin-top: 30px;
  }
  #register_free{
    width: 100px;
    height: 25px;
    border-radius: 5px;
    outline: none;
    border: 1px solid grey;
    color:grey;
    font-size: 10px;
    background: white;
    position: absolute;
    top: 105px;
    left: 270px;
  }
</style>